<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>房间拆分</title>

<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<style type="text/css">
	#roomNum th {
		background: #d70b16;
		color: #fff;
	}
	.check{
		width: 35px;
	}
	.foot{
		text-align: left !important;
		/* padding-right: 50px !important; */
	}
</style>
</head>
<body>
	<div>
		<table id="roomNum" class="table table-bordered">
			<thead>
				<tr>
					<th class="check"><input id="checkAll" type="checkbox"></th>
					<th>房间号</th>
					<th>建筑面积</th>
					<th>套内建面</th>
					<th>户型</th>
					<th>朝向</th>
					<th>用途</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody class="content" style="background:#eee">
				<c:if test="${empty requestScope.canSplitRoom }">
					<tr>
						<td colspan="8" >没有可拆分的房间...</td>
					</tr>
				</c:if>
				<c:forEach items="${requestScope.canSplitRoom }" var="t" >
					<tr>
						<td><input type="checkbox" value="${pageScope.t.id }" ></td>
						<td>${pageScope.t.roomNum }</td>
						<td>${pageScope.t.buildingArea } ㎡</td>
						<td>${pageScope.t.setInArea } ㎡</td>
						<td>${pageScope.t.houseType }</td>
						<td>${pageScope.t.direction }</td>
						<td>${pageScope.t.roomUse }</td>
						<td>${pageScope.t.roomStatus }</td>
					</tr>
				</c:forEach>
			</tbody>
			<tfoot>
				<tr>
					<td class="foot" colspan="8">
						<span>拆分时间:</span>
						<input id="splitDate" class="Wdate" onClick="WdatePicker({ dateFmt: 'yyyy-MM-dd'})" />
						&nbsp;
						<button id="runSplit" class="btn btn-danger radius">开始拆分</button>
						<span>&nbsp;&nbsp;*注：房间拆分后客户会保留在主房间中</span>
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript" src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	$(function(){
		//全选、全不选
		$("#checkAll").click(checkAll);
		$("tbody.content input[type='checkbox']").click(checkEvery);
		
		//合并事件
		$("#runSplit").click(runSplit);
	});
	//点击全选按钮 选中、不选中所有
	function checkAll(){
		$("tbody.content input[type='checkbox']").prop("checked",$(this).prop("checked"));
	}
	//点击某一个复选都进行判断，反向控制全选按钮
	function checkEvery(){
		var len=<c:out value="${fn:length(requestScope.canSplitRoom)}" default="0"></c:out>;
		var checkLen = $("tbody.content input[type='checkbox']:checked").length;
		if(len==checkLen){
			$("#checkAll").prop("checked",true);
		}else{
			$("#checkAll").prop("checked",false);
		}
	}
	
	//开始合并
	function runSplit(){
		var splitDate=$("#splitDate").val();
		if(splitDate){
			//输入备注信息
			layer.prompt({title: '输入备注信息，并确认', formType: 2,shade: [0.1, '#fff'],offset: '10%'}, function(remark, index){
				layer.close(index);
				submitSplit(remark,splitDate);
			});
		}else{
			$("#splitDate").focus();
			layer.msg("请输入拆分时间");
		}
	}
	//向服务器提交拆分信息
	function submitSplit(remark,splitDate){
		var index = layer.load(2);
		//获取所有被选中的复选框
		var $checkbox=$("tbody.content input[type='checkbox']:checked");
		var splitRoomId='${requestScope.roomId}';//发起拆分功能的房间id
		var checkRoom=new Array();//记录被合并的房间id
		$.each($checkbox,function(i,v){
			checkRoom.push($(v).val());
		});
		$.post("roomInfo/runSplitRoom",{
				beSplitRoomId:checkRoom.toString(),
				splitRoomId:splitRoomId,
				remark:remark,
				splitDate:splitDate
			},function(data){
				layer.close(index);
				layer.alert(data.msg,{
					shade: [0.1, '#eee']
				},function(){
					parent.updateRoom();
				});
		});
	}
	
</script>
</html>